<template>
  <el-card>
    <!-- {{msg | adasd}} -->
    <!-- // 全局和局部 -->
    <!-- Vue.filter() -->
    <!-- 卡片 > 面包屑 + el-row(select.. + button) + talbe + 分页-->
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 40px"
    >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 筛选+按钮 -->
    <el-row type="flex" justify="space-between" class="selectForm">
      <el-col :span="20">
        <el-form inline :model="q" label-width="80px">
          <el-form-item label="文章分类">
            <!-- artCateList数组 -->

            <!--
                select + option => 参见Vue基础表单 v-model
                1. 默认显示的问题: v-model的值的要显示的option的value值
                2. 操作(选中): 选择了某option=> 把当前的option的value值赋值给v-model

             -->
            <el-select v-model="q.cate_id" placeholder="请选择分类">
              <el-option label="请选择分类" value=""></el-option>

              <el-option
                v-for="item in artCateList"
                :label="item.cate_name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select v-model="q.state" placeholder="请选择状态">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search"
              >筛选</el-button
            >
            <el-button type="info" plain size="mini" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <!-- <el-button type="primary" size="mini">发表文章</el-button> -->
        <el-button type="primary" size="mini" @click="dialogVisiblePub = true"
          >发表文章</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格
    // cate_name:"最新"
    // id:5892
    // pub_date:"Tue Oct 19 2021 11:17:05 GMT+0800 (China Standard Time)"
    // state:"已发布"
    // title:"小姑老娘"
     -->
    <el-table :data="artList" border style="width: 100%">
      <el-table-column prop="title" label="文章标题" width="180">
        <template #default="{row}">
          <el-link @click="showDiaArtDetail(row.id)">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类" width="180">
      </el-table-column>

      <!-- 过滤器 => dateFormat => {{}}  or :src=" | " -->

      <!-- <el-table-column prop="pub_date | dateFormat" label="发表时间"> </el-table-column> -->
      <!-- <el-table-column prop="pub_date" label="发表时间">
          {{pub_date | dateFormat}}
         </el-table-column> -->

      <el-table-column label="发表时间">
        <template #default="{row}">
          {{ row.pub_date | dateFormat }}
        </template>
      </el-table-column>

      <el-table-column prop="state" label="状态"> </el-table-column>
      <el-table-column label="操作">
        <!-- slot-scope="scope" -->
        <!-- #default="scope" -->
        <template #default="{row}">
          <!-- scope -->
          {{ row.id }}
          <el-button size="mini" type="danger" @click="delArtById(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4" 当前页码 => 默认1
      :page-sizes="[100, 200, 300, 400]" => 每页多少条的切换
      :page-size="100" => 默认每页多少条
      layout="total, sizes, prev, pager, next, jumper" // 各种小功能
      :total="400" => 总条数

     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="q.pagenum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="q.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- dia-detail -->
    <el-dialog title="文章预览" :visible.sync="infoVisible" width="80%">
      <!-- <p>文章详情内容</p> -->
      <art-info :artInfo="artInfo"></art-info>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- dia-pub
    fullscreen 全屏
    before-close 关闭前触发的钩子
      destroy-on-close 关闭时销毁对话框里面所有元素 => 重置
     -->
    <el-dialog
      title="发表文章"
      :visible.sync="dialogVisiblePub"
      fullscreen
      :before-close="beforeClose"
      destroy-on-close
    >
      <!-- <p>发表文章内容结构</p> -->
      <art-pub @closeDiaPub="closeDiaPub"></art-pub>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  artListGetByQ,
  delArticleById,
  getArticleDetailById
} from '@/api/article.js'
import { mapState, mapActions } from 'vuex'
import ArtInfo from './components/ArtInfo.vue'
import ArtPub from './ArtPub.vue'
export default {
  components: { ArtInfo, ArtPub },
  name: 'ArtList',
  data () {
    return {
      // 筛选(请求)
      q: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      // 文章列表数据
      artList: [],
      total: 1,
      infoVisible: false,
      dialogVisiblePub: false,
      // 文章详情
      artInfo: {}
    }
  },
  created () {
    this.getArtList() // 获取表格数据
    this.getArtCateList() // 获取select下拉框所需数据(分类)
  },
  computed: {
    // artCateList(){}
    ...mapState('article', ['artCateList'])
  },
  // 分类数据 => 上午分类.vue 使用 => vuex=>
  methods: {
    ...mapActions('article', ['getArtCateList']),
    // 关闭对话框
    closeDiaPub () {
      this.dialogVisiblePub = false
      this.getArtList()
    },
    beforeClose (done) {
      // console.log('dia关闭之前执行----')
      done()
    },
    // 打开对话框
    async showDiaArtDetail (id) {
      this.infoVisible = true
      const {
        data: { code, message, data = {} }
      } = await getArticleDetailById(id)
      if (code !== 0) return this.$message.error(message)
      this.$message.success(message)
      this.artInfo = data
    },
    // 删除文章通过id
    delArtById (id) {
      // axios().then().catch()
      // async  + await axios()
      // const res = await axios()
      // const p = await this.$confirm('Sure?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).catch()
      // console.log(p)
      // p.then().then().catch()

      // 确认框
      this.$confirm('Sure?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 请求=>api/
          const {
            data: { code, message }
          } = await delArticleById(id)
          if (code !== 0) return this.$message.error(message)
          this.$message.success(message)

          // WARNING => test =>
          // 现状:  第二页起,删除当页所有数据后, 空白
          // 希望: 条件:   this.q.pagenum > 1 &&  this.artList.length===1 => this.q.pagenum--
          if (this.artList.length === 1 && this.q.pagenum > 1) {
            this.q.pagenum-- // 3-2  2-1
          }
          // 更新视图
          this.getArtList()
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 每页条数变化时,执行
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.q.pagesize = val
      this.getArtList()
    },
    // 页码改变时, 执行 => 1 => 2 => q.pagenum
    handleCurrentChange (val) {
      this.q.pagenum = val // 1 => 2
      // console.log(this.q)
      // console.log(`当前页: ${val}`)
      // artListGetByQ(this.q)
      this.getArtList()
    },
    // total 6=>每页4条pagesize => 2页 pagenum

    // 重置
    reset () {
      // 清空条件
      this.q.pagenum = 1
      this.q.pagesize = 2
      this.q.cate_id = ''
      this.q.state = ''
      this.getArtList()
    },
    // 筛选按钮
    search () {
      // console.log(this.q)
      // 重置页码
      this.q.pagenum = 1
      this.getArtList()
    },
    // 获取文章列表
    async getArtList () {
      const {
        data: { code, message, data = [], total = 1 }
      } = await artListGetByQ(this.q)
      if (code !== 0) return this.$message.error(message)
      this.$message.success(message)
      this.artList = data
      this.total = total
    }
  }
}
</script>

<style lang="less" scoped>
.selectForm {
  margin: 30px 0;
  /deep/ .el-form-item__label {
    font-size: 12px;
  }
}
</style>
